<template>
	<view class="container">

		<view class="banner">


		</view>
		<view class="qunida">
			<view class="qunida-item">
				<count-to :startVal='0' :endVal='42'  :duration='2000' class="title"><text>家</text></count-to>
				<view class="content">
					<text class="iconfont icon-qiyegongchangjianzhu "></text>
					已入驻园区</view>

			</view>
			<view class="shuxian"></view>
			<view class="qunida-item">
				<count-to :startVal='0' :endVal='1386520'  :duration='2000' class="title"><text>㎡</text></count-to>

				<view class="content">
					<text class="iconfont icon-mianji "></text>
					 累计成交面积</view>
			</view>
			<view class="shuxian"></view>
			<view class="qunida-item">

				<count-to :startVal='0' :endVal='1365'  :duration='2000' class="title"><text>家</text></count-to>

				<view class="content">
					<text class="iconfont icon-chengjiao "></text>
					成交企业

					</view>

			</view>

		</view>
		<view class="form">
			<view class="form-title">
				<view class="title-left">填写资料</view>
				<view class="iconfont icon-tianxieziliao title-right"></view>
			</view>
			<view class="form-content">
				<input class="input-item" placeholder-style="font-size: 30rpx;color:#999B9F" v-model="park_name" placeholder="请输入园区名称" />
				<input class="input-item" v-model="name" placeholder-style="font-size: 30rpx;color:#999B9F" placeholder="请输入联系人名称" />
				<input class="input-item" v-model="telephone" placeholder-style="font-size: 30rpx;color:#999B9F" placeholder="请输入联系电话" />
				<view class="form-zhiwei">
					<view class="zhiwei-title">请选择您的职业</view>
					<view class="zhiwei">
						<view :class="['zhiwei-item',{'current':index===job_index}]" :key="index" v-for="(item,index) in job" @click="changeItem(index)">{{item}}</view>

					</view>
				</view>

				<view class="tijiao_button" @click="submitSave()">提交</view>
				<view class="iconfont icon-kefu kefu"> <text>我们马上安排项目总联系您</text></view>
			</view>

		</view>
		<view class="paomadeng">
			<view class="title">
				用户求购
			</view>
			  <view class="content">
							<view   class="item">
								<image class="image" src="https://pic.fhshidai.com/user/FDizhb4QYD4VS9H60CR58GlWqtzsruJdRPol935d.png"></image>
								<view class="right">
									<view class="title1">
										<view class="title1-left">广东陈先生 188***6782</view>
										<view class="title1-right">10小时前</view>
									</view>
									<view class="goufangxuqiu">发布购房需求:</view>
									<view class="tag">
										<view class="tag-item">
											佛山市
										</view>
										<view class="tag-item">

											可办环评
										</view>
										<view class="tag-item">

											层高6米
										</view>
									<view class="tag-item">

										4000-5000㎡
									</view>
									</view>
								</view>
							</view>


							<view   class="item">
								<image class="image" src="https://pic.fhshidai.com/user/0WGk921L1sKlpDthcO4zGuH66kxxhA8lJ5KDGOsf.png"></image>
								<view class="right">
									<view class="title1">
										<view class="title1-left">深圳王先生 137***3606</view>
										<view class="title1-right">21小时前</view>
									</view>
									<view class="goufangxuqiu">发布购房需求:</view>
									<view class="tag">
										<view class="tag-item">
											佛山市
										</view>

									<view class="tag-item">

										4000-5000㎡
									</view>
									</view>
								</view>
							</view>
							<view   class="item">
								<image class="image" src=""></image>
								<view class="right">
									<view class="title1">
										<view class="title1-left">中山陈先生 133***6358</view>
										<view class="title1-right">3天前</view>
									</view>
									<view class="goufangxuqiu">发布购房需求:</view>
									<view class="tag">
										<view class="tag-item">
											惠州市
										</view>
									<view class="tag-item">

										可办环评
									</view>
									<view class="tag-item">

										层高6米
									</view>
									<view class="tag-item">

										4000-5000㎡
									</view>
									</view>
								</view>
							</view>
							<view   class="item">
								<image class="image" src="https://pic.fhshidai.com/user/U5ataEyOVHeR3tvyyrlIS6QvgdBrk92OgGUPywlf.png"></image>
								<view class="right">
									<view class="title1">
										<view class="title1-left">深圳王先生 137***6357</view>
										<view class="title1-right">5天前</view>
									</view>
									<view class="goufangxuqiu">发布购房需求:</view>
									<view class="tag">
										<view class="tag-item">
											佛山市
										</view>
									<view class="tag-item">

										可办环评
									</view>
									<view class="tag-item">

										层高6米
									</view>
									<view class="tag-item">

										4000-5000㎡
									</view>
									</view>
								</view>
							</view>

			        </view>
		</view>
		<view class="service">
			<view class="service-title">
				<view>已服务品牌</view>
				<view class="red-line"></view>
			</view>
			<view class="service-content">
				<image src="https://pic.fhshidai.com/user/pinpai.png"></image>

			</view>
		</view>

		<uni-footer></uni-footer>
	</view>
</template>

<script>

	import countTo from '@/components/dash-countTo/dash-countTo.vue'

	export default {
		data() {
			return {
				park_name: '',
				name: '',
				telephone: '',
				job: ['董事长', '项目总', '招商总', '主管'],
				job_index: 0,
				broadcastStyle: {
                        speed: 30, //每秒30px

                    },
			};
		},
		components:{
			countTo,

		},
		methods: {

			changeItem(index) {
				this.job_index = index
			},
			submitSave() {
				if (this.prevent == true) {
					return
				}
				this.prevent = true
				if (this.park_name == '') {
					uni.showToast({
						icon: 'fail',
						title: '请输入园区名称'
					})
					this.prevent = false
					return;
				}
				if (this.name == '') {
					uni.showToast({
						icon: 'fail',
						title: '请输入联系人名称'
					})
					this.prevent = false
					return;
				}
				if (this.mobile == '') {
					uni.showToast({
						icon: 'fail',
						title: '请输入联系电话'
					})
					this.prevent = false
					return;
				}
				this.$api.saveUserParkNeeds({
					park_name: this.park_name,
					name: this.name,
					telephone: this.telephone,
					job: this.job[this.job_index]
				}).then(res => {
					console.log(res)
					//#ifdef MP-TOUTIAO
						this.$toutiao(3)
					//#endif
					uni.showToast({
						title: '提交需求成功',
						duration: 3000,
						success() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}

					});
					this.prevent = false
				}).catch(e => {
					uni.showToast({
						icon: 'fail',
						title: '服务器出错'
					})
					this.prevent = false
				})
			}
		}
	}
</script>
<style>
	page {
		color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.red-line {
		color: #D93337;
		height: 4rpx;
		width: 157rpx;
	}


	.tijiao_button {
		margin-top: 47rpx;
		width: 608rpx;
		height: 90rpx;
		color: #FFFFFF;
		font-size: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(223, 57, 61, 1);
		border-radius: 45rpx;
	}
	.item{
		padding-top: 31rpx;
		width: 690rpx;
		padding-left: 26rpx;
		padding-right: 27rpx;
		margin-bottom: 19rpx;
		padding-bottom: 28rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(229, 229, 229, 1);
		box-shadow:0rpx 3rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		.image{
			width:63rpx;
			height:63rpx;
			border-radius:50%;
		}
		.right{
			width: 540rpx;
			display: flex;
			flex-direction: column;
			.goufangxuqiu{
				font-size:24rpx;
				font-family:SourceHanSansCN;
				font-weight:400;
				color:rgba(0,0,0,1);
				line-height:36rpx;
			}
			.tag{
				display: flex;
				margin-top: 15rpx;
				.tag-item{
					display: flex;
					align-items: center;
				width:fit-content;
				width:-webkit-fit-content;
					width:-moz-fit-content;
					height:35rpx;
					justify-content: center;
					background:rgba(244,247,249,1);
					border-radius:4rpx;
					font-size:20rpx;
					font-family:SourceHanSansCN;
					font-weight:400;
					color:rgba(93,108,122,1);
					margin-right:6rpx;
					padding-left: 14rpx;
					padding-right: 14rpx;
				}
			}
			.title1{
				display: flex;
				width: 510rpx;
				justify-content: space-between;
				.title1-left{
					font-size:24rpx;
					font-family:SourceHanSansCN;
					font-weight:400;
					color:rgba(0,0,0,1);
					line-height:36rpx;
				}
				.title1-right{
					font-size:20rpx;
					font-family:SourceHanSansCN;
					font-weight:400;
					color:rgba(154,155,160,1);
					line-height:40rpx;

				}
			}
		}
	}
	.kefu {
		margin-top: 28rpx;
		width: 100%;
		text-align: center;
		color: #DF393D;
		font-size: 24rpx;

		text {
			font-weight: 400;
			color: rgba(153, 155, 159, 1);
		}
	}

	.container {
		background-color: #F3F3F3;

		.banner {
			margin-top: -30rpx;
			background: url(https://pic.fhshidai.com/file7Hfm5TtI64elpadB8qVNC2B43dUhRgqQ7qsnwbcA.png) no-repeat;
			width: 100%;
			background-size: 750rpx 658rpx;
			height: 658rpx;
			text-align: center;
			z-index: 2;
		}
		.qunida{
			width: 690rpx;
			height:160rpx;
				background: rgba(255, 255, 255, 1);
			border-radius:10rpx;
			margin-top: -300rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 30rpx;
			.qunida-item{
				width: 33%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.title{

					font-size:42rpx;
					font-family:SourceHanSansCN;
					font-weight:500;
					color:rgba(0,0,0,1);
					line-height:80rpx;
					text{
						font-size: 24rpx;
						font-weight:400;
						color:#000000;
						letter-spacing:8rpx;

					}
				}

				.content{
					font-size:24rpx;
					font-family:SourceHanSansCN;
					font-weight:400;
					color:rgba(154,155,160,1);

					text:nth-child(1){
						font-size:24rpx;
					letter-spacing:8rpx;
					}
					text:nth-child(2){
						font-size:23rpx;
		letter-spacing:8rpx;
					}
					text:nth-child(3){
						font-size:21rpx;
				letter-spacing:8rpx;

					}
				}
			}
			.shuxian{
				width:2rpx;
				height:44rpx;
				background:rgba(243,243,243,1);
			}
		}
		.paomadeng{

				margin-left: 30rpx;

				margin-top:80rpx ;
				color: red;
				.title{
					font-size:40rpx;
					font-family:SourceHanSansCN;
					font-weight:bold;
					color:rgba(49,49,49,1);
					line-height:80rpx;
				}
				.content{

				};
		}
		.form {
			margin-left: 30rpx;

			width: 690rpx;
			height: 1033rpx;
			border-radius: 9rpx;
			margin-top: -10rpx;
			background: rgba(255, 255, 255, 1);

			.form-title {
				height: 115rpx;
				padding-left: 42rpx;
				padding-right: 42rpx;
				display: flex;
				padding-top: 30rpx;
				border-bottom: 4rpx solid #F3F3F3;
				justify-content: space-between;
				align-items: flex-end;
				padding-bottom: 21rpx;

				.title-left {
					color: #313131;
					font-size: 40rpx;
					font-weight: bold;

				}

				.title-right {
					font-size: 54rpx;
					color: #313131;
				}

			}

			.form-content {
				padding-left: 42rpx;
				padding-right: 42rpx;

				.input-item {
					height: 94rpx;
					border-bottom: 2rpx solid #F3F3F3;
					color: #303133;
				}

				.form-zhiwei {
					height: 300rpx;
					margin-top: 60rpx;
					border-bottom: 2rpx solid #F3F3F3;

					.zhiwei-title {
						font-size: 30rpx;

						font-weight: bold;
						color: rgba(59, 59, 59, 1);
						line-height: 40px;
					}

					.zhiwei {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.zhiwei-item {
							width: 294rpx;
							height: 75rpx;
							background: rgba(247, 247, 245, 1);
							border: 1rpx solid rgba(219, 219, 219, 1);
							border-radius: 4rpx;
							font-size: 28rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-bottom: 19rpx;
							font-weight: 500;
							color: rgba(73, 73, 73, 1);
						}

						.current {
							background: rgba(223, 57, 61, 1);
							color: rgba(255, 255, 255, 1);
						}
					}
				}
			}
		}

		.service {
			background-color: #FFFFFF;
			display: flex;
			margin-top: 47rpx;
			flex-direction: column;
			align-items: center;
			padding-bottom: 95rpx;

			.service-title {
				display: flex;
				width: 686rpx;
				height: 134rpx;
				justify-content: flex-end;
				align-items: center;
				font-size: 40rpx;
				line-height: 70rpx;
				flex-direction: column;
				border-bottom: 2rpx solid #F3F3F3;
				font-weight: bold;
				color: rgba(49, 49, 49, 1);

				.red-line {
					width: 157rpx;
					height: 4rpx;
					background: rgba(217, 51, 55, 1);
				}
			}

			.service-content {

				width: 686rpx;
				height: auto;
				padding-top: 30rpx;
				image {
					width: 686rpx;
				}
			}
		}
	}
</style>
